
<template>

  <div style="position: relative; width: 100%; height: 70%; min-width: 1000px;">
    <img src="@/assets/img3.jpg" alt="Image" class="styled-image" style="width: 100%; height: 100%; object-fit: cover;">
    <div class="slow-fade">
      大明湖景区
    </div>
  </div>
  <div class="container">
    <div class="image-gallery">
      <div class="image-wrapper">
        <img src="@/assets/image1.jpg" alt="SceneOne" class="scene" @click="gotoAnnouncementSearch" />
        <div class="image-text">历史资讯查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image2.jpg" alt="SceneTwo" class="scene" @click="gotoRestaurant"/>
        <div class="image-text">餐厅查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image3.jpg" alt="SceneThree" class="scene" @click="gotoHotel"/>
        <div class="image-text">酒店查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image4.jpg" alt="SceneFour" class="scene" @click="gotoEntertainment"/>
        <div class="image-text">演出查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image5.jpg" alt="SceneFive" class="scene" @click="searchRoute"/>
        <div class="image-text">旅游线路查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image6.jpg" alt="SceneSix" class="scene" @click="searchTraffic"/>
        <div class="image-text">交通状况查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image7.jpg" alt="SceneSeven" class="scene" @click="searchWeather"/>
        <div class="image-text">天气查询</div>
      </div>
      <div class="image-wrapper">
        <img src="@/assets/image8.jpg" alt="SceneEight" class="scene" @click="returnToTop"/>
        <div class="image-text">回到顶部</div>
      </div>
    </div>  
  
  
  
    <el-card class="announcement-board">
      <template #header>
        <span>景区公告</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="item in items"
          :key="item.id"
          :timestamp="item.date"
          placement="top"
          :class="{ 'clicked': item.isActive }"
        >
          <el-card class="announcement-card">
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  
  
  </div>
  
    <div class="small-images">
      <div class="image-wrapper" @click="goToFirstImageLink">
        <img src="@/assets/scene1.jpg" alt="SceneOne" class="scene" />
        <div class="image-text">红叶湖湾</div>
      </div>
      <div class="image-wrapper" @click="goToSecondImageLink">
        <img src="@/assets/scene2.jpg" alt="SceneTwo" class="scene" />
        <div class="image-text">雾凇枫影</div>
      </div>
      <div class="image-wrapper" @click="goToThirdImageLink">
        <img src="@/assets/scene3.jpg" alt="SceneThree" class="scene" />
        <div class="image-text">湖亭四景</div>
      </div>
      <div class="image-wrapper" @click="goToFourthImageLink">
        <img src="@/assets/scene4.jpg" alt="SceneFour" class="scene" />
        <div class="image-text">枫亭教堂</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  //import axios from '@/plugins/axios.js';
  /*
  const request = axios.create({
      baseURL: 'http://localhost:9090',
      timeout: 10000    //超时时间为30秒
  })*/
  const items = ref([
  
    { id: 1, date: '2024-05-15', title: '重要通知：暑期活动安排', content: '尊敬的游客，为了让您度过一个愉快的假期，我们特别安排了一系列丰富多彩的暑期活动。欢迎参加！' },
    { id: 2, date: '2024-05-14', title: '湖区环境保护公告', content: '亲爱的游客，为了维护大明湖清澈碧蓝的湖水，我们号召每一位游客爱护环境，共同守护我们的美丽湖区。' },
    { id: 3, date: '2024-05-13', title: '春季赏花活动安排', content: '尊敬的游客，春天来临，大明湖景区的各类花卉将陆续开放。特别安排了赏花路线图，期待您的光临。' },
    { id: 4, date: '2024-05-12', title: '游船服务公告', content: '亲爱的游客，为了您的出行便利，景区新增了多条游船线路，欢迎您来体验。详细信息请咨询服务台。' },
    { id: 5, date: '2024-05-11', title: '枫叶季节来临预告', content: '尊敬的游客，秋天的枫叶季节即将到来，大明湖枫叶将染上一抹绚丽色彩。敬请期待！' },
    { id: 6, date: '2024-05-10', title: '紧急通知：天气变化', content: '亲爱的游客，请注意最近天气变化较大，建议您随身携带外套和雨具，以备不时之需。祝您游玩愉快！' },
    { id: 7, date: '2024-05-09', title: '景区美食推荐', content: '尊敬的游客，我们为您精选了多款地道美食，欢迎您品尝大明湖特色小吃，让您的味蕾享受一场美食盛宴。' },
    { id: 8, date: '2024-05-08', title: '安全紧急提示', content: '亲爱的游客，为了您的安全，请遵守景区规定，注意人身财产安全，如遇紧急情况，请及时联系工作人员。祝您游玩愉快！' }
  
  ])
  const router = useRouter();
  const goToFirstImageLink = () => {
    router.push({ name: 'first' });
  }
  const goToSecondImageLink = () => {
    router.push({ name: 'second' });
  }
  const goToThirdImageLink = () => {
    router.push({ name: 'third' });
  }
  const goToFourthImageLink = () => {
    router.push({ name: 'fourth' });
  }
  const gotoAnnouncementSearch = () =>{
    router.push({ name: 'announcementsearch'});
  }
  const gotoRestaurant = () =>{
    router.push({ name: 'restaurant'})
  }
  const gotoEntertainment = () => {
    router.push({ name:'entertainment'})
  }
  const gotoHotel = () => {
    router.push({ name: 'hotels'})
  }
  const searchRoute = () => {
    router.push({ name: 'routes'})
  }
  const searchTraffic = () => {
    router.push({ name: 'traffic'})
  }
  const searchWeather = () => {
    router.push({ name: 'weather'})
  }
  const returnToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // Use 'auto' if you don't want the smooth scrolling effect
    });
  /*
    const togetItem = async () => {
    try {
      const response = await request.get('/emergencyInformation/search');
      items.value = response.data.map(item => ({
        ...item,
        isActive: false // 初始化 isActive 属性
      }));
    } catch (error) {
      console.error('Error fetching data:', error);
      throw error;
    }
  };*/
  }
  </script>
  
  
  <style scoped>
  .container {
    display: flex;
  }
  
  .main-image {
    width: 30%;
    height: auto;
    min-width: 200px;
  }
  .announcement-board {
    width: 50%;
    margin-bottom: 10px;
    align-self: flex-end; /* 右对齐 */
  }
  
  .announcement-card {
   
    margin-bottom: 10px;
    align-self: flex-end; /* 右对齐 */
    transition: transform 0.3s ease-in-out;
  }
  .announcement-card:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
  
  .announcement-card.clicked {
    background-color: #f0f0f0; /* 点击时的背景色示例 */
  }
  
  
  .el-timeline-item.active .announcement-card {
    background-color: #f0f0f0; /* 点击时的背景色示例 */
  }
  .el-timeline-item.active.announcement-card{
    background-color: #f0f0f0; /* 点击时的背景色示例 */
  }
  .small-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
  }
  
  .image-wrapper {
    position: relative;
    width: calc(50% - 10px); /* 调整为 2×2 排列 */
    cursor: pointer;
    overflow: hidden; /* 隐藏溢出的部分，以防止放大时的影响 */
  }
  
  .image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* 添加过渡效果 */
  }
  .image-gallery {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  .image.image-wrapper{
    width:100%;
  }
  .image-wrapper:hover img {
    transform: scale(1.05); /* 悬停时放大到 1.1 倍 */
  }
  .scene {
    width: 100%;
    height: auto;
  }
  
  .image-text {
    position: absolute;
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 将元素向左上方移动自身宽高的一半，实现居中效果 */
    color: white;
    font-size: 24px; /* 设置更大的字体大小 */
    text-shadow: none; /* 取消文本的阴影效果 */
  }
  .container {
    display: flex;
    justify-content: center;
  }
  
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px; /* 控制整个图片画廊的最大宽度 */
    border-radius: 8px; /* 添加圆角边框 */
  }
  
  .image-wrapper {
    width: 48%; /* 每个图片容器宽度为总宽度的48%，以便每行两个 */
    margin-bottom: 20px; /* 图片之间的垂直间距 */
    transition: transform 0.3s ease-in-out;
    border-radius: 8px; /* 添加圆角边框 */
  }
  
  .image-wrapper:hover {
    transform: scale(1.1);
  }
  
  .scene {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 添加圆角边框 */
  }
  
  .image-text {
    text-align: center;
    margin-top: 5px;
    font-size: 18px;
    color: #ffffff;
    transition: color 0.3s ease-in-out;
  }
  
  .image-wrapper:hover .image-text {
    color: rgb(0, 0, 0);
  }
  .slow-fade {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #333;
      font-size: 54px;
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      opacity: 0;
      animation: fadeIn 3s ease-in-out forwards;
    }
  
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
  